<template>
    <div class="main">
        <!--操作栏  -->
        <div class="nav clear">
            <div class="btn">
                <el-button type="success" icon="el-icon-plus" @click="add()">新增</el-button>
            </div>
            <div class="search">
                <el-input v-model="search" placeholder="请输入内容"></el-input>
                <el-button class="el-icon-search" @click="moHuSearch()"></el-button>
            </div>
        </div>

        <!-- 表格 -->
        <div>
            <template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column
                    prop="typesCustomer.title"
                    label="类型"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="title"
                    label="标题"
                    width="400">
                    </el-table-column>
                    <el-table-column
                    prop="customer.username"
                    label="患者"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="customer.employee.realName"
                    label="负责医生"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="followDay"
                    label="跟进日期"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="nextFollowDay"
                    label="下次跟进"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="200">
                        <template slot-scope="scope">{{scope.row.createTime|dateFormat}}</template>
                    </el-table-column>
                    <el-table-column
                    prop="statusCustomer.title"
                    label="状态"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit-outline" @click="modify(scope)">修改</el-button>
                        <el-button type="danger" icon="el-icon-close" @click="open(scope)">删除</el-button>
                    </template>   
                    </el-table-column>
                </el-table>
            </template> 
        </div>

        <!-- 页码内容 -->
        <div class="pages clear">
            <div class="leftPage">
                <span>共 <b>{{maxCount}}</b> 条 | 每页 <b>5</b> 条 | 共 <b>{{maxPage}}</b> 页</span>
            </div>
            <div class="rightPage">
                <el-pagination
                background
                layout="prev, pager, next"
                :page-count='maxPage'
                :current-page='nowPage'
                @current-change='changePage'>
                </el-pagination>
            </div>
        </div>

    </div>
</template>
<script>
import {initPatientsFollowTable,PatientsFollowTableDelete} from '../utils/api/patientsFallow'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        search:'',
        // 表格渲染的模拟数据
        tableData:[],
        nowPage:1,//当前页
        maxPage:0,//最大页
        maxCount:0,//数据总条数
        obj:{
            limit:5,//每页显示几条数据
            page:1,//第几页
            search:'',
            },
    }
    },
methods:{
        // 获取患者跟进的全部信息
        getAllPatientsFollow(){
            initPatientsFollowTable(this.obj).then((data)=>{
                console.log(data);
                this.tableData=data.data.data.customerFollow;
                this.maxCount=data.data.data.count;
                this.maxPage=Math.ceil(data.data.data.count/this.obj.limit);
                // console.log(this.maxPage);
                
                this.nowPage=this.obj.page;
                // console.log(this.nowPage);
            })
        },
        // 当前页改变时触发的函数，例如：当点击第二页时，当前页的页码变为2
        changePage(num){ 
            this.nowPage=num;
            this.obj.page=this.nowPage;
            
            // console.log(this.obj);
            this.getAllPatientsFollow()
        }, 
        // 点击模糊搜索的按钮，查询数据
        moHuSearch(){
            this.obj.search=this.search;
            initPatientsFollowTable(this.obj).then((data)=>{
                console.log(data);
                if(data.data.code==200){
                    this.getAllPatientsFollow()
                }
            })
        },
        // 点击新增按钮出现新增页面
        add(){
            this.$router.push('/home/patientsFollow/patientsFollowAdd')
        },
        // 点击修改按钮出现修改页面
        modify(data){
            // console.log(data);
            this.$router.push({path:'/home/patientsFollow/patientsFollowModify',query:{...data.row}})
        },
        //删除的确认弹框
        open(data) {
            console.log(data);
        this.$confirm('删除该记录将不能恢复，确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj={
                id:data.row.id
            };
          PatientsFollowTableDelete(obj).then((data)=>{
            //   console.log(data);
              if(data.data.code==200){
                if(this.tableData.length==1){
                    this.nowPage--
                    this.obj.page--
                }
                //  console.log(this.tableData);
                this.getAllPatientsFollow();
                this.$message({
                type: 'success',
                message: '删除成功!'
                 });
              }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
created(){
    this.getAllPatientsFollow()
}
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    margin-top: 20px;
    .nav{
        padding:0 0 20px 0;
        .btn{
            float: left;
        }
        .search{
            float: right;
            .el-input{
                width: 200px;
            }
        }
    }
    .pages{
        background-color: #FAFAFA;
        padding: 20px;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
}
</style>